<template>
  <div class="qaList">
    <div class="attentionBox">
      <div class="">
        <div class="searchRight">
          <span v-if="!editable" class="batch" @click="showEdit">批量管理</span>
          <div v-else class="saveList">
            <el-checkbox v-model="selectAll" @change="changeChecked">全选</el-checkbox>
            <span class="delete" @click="delFun">删除</span>
            <span class="save" @click="saveList">保存</span>
          </div>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="我的提问" name="question" class="sub-main" v-loading="listLoading">
        <template v-if="questionList?.length">
          <div class="questionList listBox">
            <div
              class="item"
              v-for="(item, index) in questionList"
              :key="item.problemId"
              :class="{
                selected: item.selected,
                edit: editable
              }"
              @click="selectQu(index, item.selected)"
            >
              <div class="questionBox">
                <div class="mc" v-if="editable"></div>
                <img class="pointer" :src="item.image" alt="" @click="toProductDetail(item)" />
                <div class="infoBox">
                  <div>
                    <span class="question spans">问</span>
                    <h3>{{ item.problem }}</h3>
                    <span class="time">{{ item.createTime }}</span>
                  </div>
                  <!-- {{ item.answers }} -->
                  <ul :class="{ moreShow: current === index }" v-if="item.answers.length > 0">
                    <span class="answer spans">答</span>
                    <li class="answerList" v-for="(anw, inx) in item.answers" :key="anw.answerId">
                      <p>{{ anw.answer }}</p>
                      <span
                        class="viewDetail" :class="{ noSee: current !== null && inx !== item.answers.length - 1 }"
                        v-if="item.answers.length > 1" @click="seeAll(index)">{{ current === null ? '查看全部' : '收起' }}</span>
                    </li>
                  </ul>
                  <p v-else class="noReply">暂无回答</p>
                </div>
              </div>
            </div>
          </div>
          <el-pagination
            :hide-on-single-page="true"
            class="mar-top-30"
            background layout="prev, pager, next, jumper"
            :current-page="questionPage.page"
            :page-size="questionPage.pageSize"
            :total="questionPage.total"
            @current-change="questionChangePage"
          />
        </template>
        <div class="nothing sub-main" v-else>
          <svg-icon
            style="
              width: 240px;
              height: 240px;
              margin-bottom: 20px;
            " name="user-wenda-nodata" />
          <p class="fs20 font-color-999">你还没有提问～</p>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的回答" name="QA" class="sub-main" v-loading="listLoading">
        <div v-if="answerList?.length">
          <div class="qaBoxList listBox">
            <div
              class="item"
              v-for="(item, index) in answerList"
              :key="item.problemId"
              :class="{
                selected: item.selected,
                edit: editable
              }"
              @click="selectQa(index, item.selected)"
            >
              <div class="qaBox">
                <div class="mc" v-if="editable"></div>
                <img :src="item.image" alt="" @click="toProductDetail(item)" />
                <div class="infoBox">
                  <span class="question spans">问</span>
                  <h3>{{ item.problem }}</h3>
                  <div v-for="(anw, inx) of item.answers" :key="anw.answerId">
                    <span class="answer spans" v-if="inx === 0">答</span>
                    <p class="reply" v-if="inx === 0">{{ anw.answer }}</p>
                    <p class="replyTime" v-if="inx === 0">回答于：{{ anw.createTime }}</p>
                  </div>
                </div>
              </div>
              <div class="rightBox">
                <span class="time">{{ item.createTime }}</span>
              </div>
            </div>
          </div>
          <el-pagination
            :hide-on-single-page="true"
            class="mar-top-30"
            background
            layout="prev, pager, next, jumper"
            :page-size="answerPage.pageSize"
            :current-page="answerPage.page"
            :total="answerPage.total"
            @current-change="answerChangePage"
          />
        </div>
        <div class="nothing sub-main" v-else>
          <svg-icon style="width: 240px; height: 240px; margin-bottom: 20px;" name="user-wenda-nodata" />
          <p class="fs20 font-color-999">你还没有回答～</p>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { defineComponent, onBeforeMount, reactive, ref, toRefs, shallowRef, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useUser } from '@/store/user'
import {
  getMyProblems,
  getMyAnswers,
  delMyProblem,
  delMyAnswers
} from '@/api/user/user.js'
import SvgIcon from '@/components/svgIcon/index.vue';

defineComponent({
  name: 'QaList'
})
const router = useRouter()
const userStore = useUser()
const { userInfo } = toRefs(userStore)
const listLoading = shallowRef(false);
const questionPage = reactive({
  page: 1,
  pageSize: 10,
  total: 0
});
const questionList = ref([]);

const answerPage = reactive({
  page: 1,
  pageSize: 10,
  total: 0
});
const answerList = ref([]);

const activeName = shallowRef('question');
const current = ref(null);
const editable = shallowRef(false);
const selectAll = shallowRef(false);

function getSelfProblems () {
  listLoading.value = true
  getMyProblems({
    page: questionPage.page,
    pageSize: questionPage.pageSize
  }).then(response => {
    const res = response.data;
    if (res.code === "200") {
      questionList.value = res.data && res.data.list || [];
      questionPage.total = res.data && parseInt(res.data.total) || 0;
    }
  }).finally(() => {
    listLoading.value = false
  })
};

// 我的回答
function getSelfAnswers () {
  listLoading.value = true
  getMyAnswers({
    page: questionPage.page,
    pageSize: questionPage.pageSize
  }).then(response => {
    const res = response.data
    if (res.code === "200") {
      answerList.value = res.data && res.data.list || [];
      answerPage.total = res.data && parseInt(res.data.total) || 0;
    }
  }).catch(err => ElMessage.error(err.message))
    .finally(() => listLoading.value = false)
}


function handleClick (tab) {
  editable.value = false
  selectAll.value = false
  if (tab.paneName === 'question') {
    questionPage.page = 1
    getSelfProblems()
  } else {
    answerPage.page = 1
    getSelfAnswers()
  }
}
function questionChangePage (val) {
  questionPage.page = val;
  getSelfProblems();
}
function answerChangePage (val) {
  answerPage.page = val;
  getSelfAnswers();
}
function seeAll (index) {
  current.value = current.value === index ? null : index
}

function toProductDetail (item) {
  let data = {
    shopId: item.shopId,
    productId: item.productId,
    skuId: item.skuId
  };
  router.push({
    path: "/productDetail",
    query: {
      proData: JSON.stringify(data)
    }
  });
}
function showEdit () {
  editable.value = true;
}
function changeChecked () {
  if (activeName.value === "question") {
    questionList.value.forEach(item => {
      nextTick(() => {
        item.selected = selectAll.value;
      })
    })
  }
  else {
    answerList.value.forEach(item => {
      item.selected = selectAll.value;
    })
  }
}
function delFun () {
  let x = false;
  let ids = [];
  if (activeName.value === "question") {
    questionList.value.map(item => {
      if (item.selected) {
        x = true;
        ids.push(item.problemId);
      }
    });
    if (x === false) {
      return ElMessage.warning("请先选择需要删除的提问");
    }
    ElMessageBox.confirm("此操作将删除选中的回答, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }).then(() => {
      delProblem(ids);
    }).catch(() => { });
  }
  else {
    answerList.value.forEach(item => {
      if (item.selected) {
        item.answers.forEach(j => {
          if (j.name === userInfo.value.name) {
            x = true;
            ids.push(j.answerId);
          }
        });
      }
    });
    if (x === false) {
      return ElMessage.warning("请先选择需要删除的回答");
    }
    ElMessageBox.confirm("此操作将删除选中的回答, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }).then(() => {
      delAnswer(ids);
    }).catch(() => { });
  }
}
function saveList () {
  editable.value = false;
}
function selectQu (index, selected) {
  questionList.value[index].selected = selected ? 0 : 1
  selectAll.value = true;
  questionList.value.map(item => {
    if (!item.selected) {
      selectAll.value = false;
    }
  });
}
function selectQa (index, selected) {
  answerList.value[index].selected = selected ? 0 : 1
  selectAll.value = true;
  answerList.value.map(item => {
    if (!item.selected) {
      selectAll.value = false;
    }
  });
}
// 批量删除我的提问
function delProblem (ids) {
  delMyProblem({ ids: ids }).then(response => {
    const res = response.data;
    if (res.code === "200") {
      ElMessage.success("删除成功");
      editable.value = false;
      selectAll.value = false;
      getSelfProblems();
    }
  }).catch(err => ElMessage.error(err.message))
}
function delAnswer (ids) {
  delMyAnswers({ ids: ids }).then(response => {
    const res = response.data;
    if (res.code === "200") {
      ElMessage.success("删除成功");
      editable.value = false;
      selectAll.value = false;
      getSelfAnswers();
    }
  }).catch(err => ElMessage.error(err.message))
}

onBeforeMount(() => {
  getSelfProblems();
})
</script>

<style lang="scss" scoped>
.qaList {
  border: 1px solid #E5E5E5;
  position: relative;

  :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
  }

  .attentionBox {
    position: absolute;
    top: 15px;
    right: 25px;
    z-index: 99;

    .searchRight {
      display: flex;

      input {
        margin-left: 16px;
        border: 1px solid #E5E5E5;
        padding-left: 10px;
        font-size: 14px;
        width: 175px;
      }

      span {
        display: block;
        height: 30px;
        line-height: 30px;
      }

      .batch {
        color: $mainGlod;
        font-size: 12px;
        width: 78px;
        text-align: center;
        height: 28px;
        line-height: 28px;
        // background: $mainColor;
        background-color: #FFF;
        border: 1px solid $mainGlod;
        cursor: pointer;
      }

      .searchBtn {
        width: 64px;
        height: 28px;
        line-height: 28px;
        background: $mainGlod;
        color: #FFFFFF;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
      }

      .saveList {
        display: flex;
        align-items: center;

        span {
          margin-left: 36px;
          cursor: pointer;
          color: #333333;
          font-size: 14px;
        }

        span.save {
          width: 78px;
          height: 28px;
          background: $mainGlod;
          color: #FFFFFF;
          text-align: center;
          line-height: 28px;
        }
      }
    }
  }

  :deep(.el-tabs__nav-scroll) {
    padding: 0 25px;
    height: 50px;
    background-color: #FAFAFA;

    .el-tabs__item {
      height: 50px;
      font-size: 18px;
      color: #333333;
    }

    .is-active {
      color: $mainGlod;
    }
  }
  :deep(.el-tabs__content) {
    padding: 35px 40px;
  }

  .listBox {
    border-top: 1px solid #E5E5E5;
    position: relative;

    .item {
      display: flex;
      justify-content: space-between;
      padding: 25px 0;
      border-bottom: 1px solid #E5E5E5;
      // margin-bottom: 30px;
      position: relative;

      .questionBox {
        display: flex;
        width: 100%;

        img {
          width: 62px;
          height: 62px;
          margin-right: 20px;
        }

        .infoBox {
          font-size: 14px;
          color: #333333;
          width: 100%;

          div {
            // height: 30px;
            // line-height: 30px;
            display: flex;
            justify-content: space-between;

            h3 {
              flex: 1;
            }

            span {
              display: block;
              text-align: right;
            }

            .time {
              font-size: 13px;
              color: #666666;
              margin-bottom: 25px;
              margin-left: 30px;
            }
          }

          ul {
            height: 30px;
            line-height: 30px;
            overflow: hidden;

            .answerList {
              height: 100%;
              display: inline-flex;
              justify-content: space-between;

              .viewDetail {
                font-size: 14px;
                color: $mainColor;
                cursor: pointer;
              }

              .noSee {
                display: none;
              }
            }
          }

          .noReply {
            height: 30px;
            line-height: 30px;
            color: #999999;
          }

          .moreShow {
            height: auto;
          }
        }
      }

      .qaBox {
        display: flex;
        // width: 700px;
        flex: 1;

        img {
          width: 62px;
          height: 62px;
          margin-right: 20px;
        }

        .infoBox {
          font-size: 14px;
          color: #333333;

          h3 {
            display: inline-block;
            margin-bottom: 20px;
          }

          .reply {
            display: inline-block;
          }

          .noReply {
            color: #999999;
          }
        }
      }

      .question {
        background-color: #C83732;
      }

      .answer {
        background-color: #C5AA7B;
      }

      .spans {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 10px;
        line-height: 20px;
        text-align: center !important;
        color: #FFF;
        cursor: default;
      }
    }
  }

  .qaBoxList {
    .item {
      .qaBox {
        .infoBox {
          h3 {
            margin-bottom: 10px;
          }

          .reply {
            margin-bottom: 5px;
          }

          .replyTime {
            font-size: 13px;
            color: #999999;
          }
        }
      }

      .rightBox {
        span {
          display: block;
          text-align: right;
          margin-left: 30px;
        }

        .time {
          font-size: 13px;
          color: #666666;
          margin-bottom: 25px;
        }

        .viewDetail {
          font-size: 14px;
          color: $mainColor;
          cursor: pointer;
        }
      }
    }
  }

  .sub-main {
    min-height: 400px;
  }

  .nothing {
    width: 100%;
    text-align: center;
    min-height: 400px;

    p {
      margin-bottom: 20px;
    }

    .toIndexBtn {
      background-color: $mainGlod;
      color: #FFFFFF;
      font-weight: normal;
      border-radius: 0;
    }
  }

  .edit:before {
    content: "";
    background: url("./../../../assets/images/user-unselected.svg");
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0;
    top: 60px;
    display: block;
    background-size: contain;
    z-index: 999;
  }

  .selected:before {
    background: url("./../../../assets/images/user-selected.svg");
    background-size: contain;
  }

  .mc {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}</style>
